<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-button type="primary" v-auth="permissionCodeMap.roleAdd" @click="operateRole(operateActionTypeMap.ADD)"
          >新增角色</a-button
        >
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'userNumber'">
          <span
            :class="record.userNumber !== 0 ? 'global-primary-text' : 'global-disabled-text'"
            @click="viewUser(record)"
          >
            {{ record.userNumber }}
          </span>
        </template>
        <template v-else-if="column.dataIndex === 'operate'">
          <a-button
            type="link"
            v-auth="permissionCodeMap.roleView"
            class="g-operate-btn"
            @click="operateRole(operateActionTypeMap.VIEW, record)"
          >
            查看
          </a-button>
          <a-button
            type="link"
            v-auth="permissionCodeMap.roleEdit"
            class="g-operate-btn"
            @click="operateRole(operateActionTypeMap.EDIT, record)"
          >
            编辑
          </a-button>
          <a-button
            type="link"
            danger
            v-auth="permissionCodeMap.roleDel"
            class="g-operate-btn"
            @click="roleDel(record)"
          >
            删除
          </a-button>
        </template>
      </template>
    </BasicTable>
    <RoleAdd @register="roleAddRegister" @operateSuccess="operateSuccess" />
    <RoleDel @register="roleDelRegister" @operateSuccess="operateSuccess" />
    <RoleUser @register="roleUserRegister" />
  </PageWrapper>
</template>

<script lang="ts" setup name="roleManage">
import { reactive, ref, computed, onMounted } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { getRoleBasicColumns, getSearchFormConfig } from './dataSource'
import { useDrawer } from '@/components/Drawer'
import { useModal } from '@/components/Modal'
import { systemUserAuth } from '@/utils'
import { operateActionType, operateTxtType, constantMap } from '@/types/enum'
import { permissionCodeMap } from '@/utils/permissionCodeMap'
import RoleAdd from './components/RoleAdd.vue'
import RoleDel from './components/RoleDel.vue'
import RoleUser from './components/RoleUser.vue'
import { userStore } from '@/store/modules/user'
import { RoleRecord } from '@/types/system'
import { message } from 'ant-design-vue'
import api from '@/api'
const { roleList } = api

const userModule = userStore()

const operateActionTypeMap = operateActionType
onMounted(() => {
  // 查询权限列表
  userModule.getRoleAuthList()
})

const [registerTable, { reload, setPagination }] = useTable({
  api: roleList,
  columns: getRoleBasicColumns(),
  useSearchForm: true,
  formConfig: getSearchFormConfig(),
  showIndexColumn: true,
  scroll: { y: constantMap.tableYHeight, x: constantMap.tableXWidth }
})

const [roleAddRegister, { openDrawer: roleAddOpenDrawer, setDrawerProps }] = useDrawer()
const [roleDelRegister, { openModal: roleDelOpenModal }] = useModal()
const [roleUserRegister, { openModal: roleUserOpenModal }] = useModal()

// 角色信息操作弹框
const operateRole = (type: OperateType, record?: RoleRecord) => {
  setDrawerProps({
    title: operateTxtType[type],
    showOkBtn: type === operateActionTypeMap.VIEW ? false : true,
    cancelText: type === operateActionTypeMap.VIEW ? '关闭' : '取消'
  })
  roleAddOpenDrawer(true, {
    type,
    record
  })
}
const roleDel = (record: RoleRecord) => {
  if (!record.userNumber) {
    roleDelOpenModal(true, {
      roleId: record.roleId,
      roleName: record.roleName
    })
  } else {
    message.warning('角色已经关联用户，解除关联后才能删除')
  }
}
// 查看角色用户
const viewUser = (record: RoleRecord) => {
  if (record.userNumber) {
    if (systemUserAuth(permissionCodeMap.userManage)) {
      roleUserOpenModal(true, {
        roleId: record.roleId
      })
    } else {
      message.warning('无权限查看用户列表')
    }
  }
}
// 操作成功回调
const operateSuccess = () => {
  setPagination({
    current: 1
  })
  reload()
}
</script>

<style lang="less" scoped></style>
